<template>
    <div class="second-wrapper">
        <div class="second-top">
            <div class="second-top-left">
                <div class="second-top-left-wrapper">
                    <dv-border-box-12>
                        <div class="inner">
                            <div class="second-option">
                                <el-button type="text" icon="el-icon-back" @click="$store.state.views = 0">返回</el-button>
                            </div>
                            <div class="flex-end">
                                <selectionHead class="selected-item" :total-message="itemOptions" @func="getValue"></selectionHead>
                            </div>
                            <div class="main-parameter">
                                <sensor :message="itemOptions" :current-city="currentCountry"></sensor>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
            </div>
            <div class="second-top-right">
                <div class="second-top-right-wrapper">
                    <dv-border-box-13>
                        <div class="inner">
                            <totalCharts></totalCharts>
                        </div>
                    </dv-border-box-13>
                </div>
            </div>
        </div>
        <div class="second-bottom">
            <div class="second-bottom-wrapper">
                <dv-border-box-13>
                    <div class="second-bottom-inner">
                        <camera></camera>
                    </div>
                </dv-border-box-13>
            </div>
        </div>
    </div>
</template>

<script>
    import selectionHead from "./selectionHead";
    import sensor from "./sensor";
    import camera from "./camera";
    import totalCharts from "./totalCharts";
    export default {
        name: "secondaryInterface",
        data(){
          return{
              itemOptions:[
                  '大连大学','金州区','中山区','长海县','甘井子区','旅顺口区','普兰店区'
              ],
              currentCountry: '大连大学'
          }
        },
        components:{
            selectionHead,
            sensor,
            camera,
            totalCharts,
        },
        methods:{
            getValue(data){
                this.currentCountry = data;
                console.log(this.currentCountry)
            }

        }
    }
</script>

<style scoped lang="scss">
    .second-wrapper{
        height: 11rem;
        width: 100%;
        .second-top{
            width: 100%;
            height: 7rem;
            display: flex;
            .second-top-left{
                flex: 1.5;
                height: 100%;
                .second-top-left-wrapper{
                    width: 100%;
                    height: 100%;
                    .inner{
                        padding: 0.25rem;
                        .main-parameter{

                        }
                    }
                }
            }
            .second-top-right{
                flex: 3;
                .second-top-right-wrapper{
                    height: 100%;
                    width: 100%;
                    .inner{
                        padding: 0.25rem;
                    }
                }
            }
        }
        .second-bottom{
            width: 100%;
            height: 4rem;
            .second-bottom-wrapper{
                width: 100%;
                height: 100%;
                .second-bottom-inner{
                    padding: 0.25rem;
                }
            }
        }
    }
    .selected-item{
        margin-top: 0.1rem;
    }
</style>
